<template>
	<view>
		<view class="searchbox">
			<view class="search_box flex-box flex-center">
				<image src="/static/icon/search.png" mode="aspectFill" class="search"></image>
				<input type="text" placeholder="请输入你要搜索的内容" v-model="q" confirm-type="search" @confirm="search" class="fs24" placeholder-class="cola">
			</view>
			<view class="nav_box">
				<view :class="{'active': tabIdx==0}" @click="tabClick(0)">全部</view>
				<!-- <view :class="{'active': tabIdx==1}" @click="tabClick(1)">代理房源<text>3</text></view> -->
				<view :class="{'active': tabIdx==1}" @click="tabClick(1)">待签约<text v-if="orderBubble.unsign_count>0">{{orderBubble.unsign_count}}</text></view>
				<view :class="{'active': tabIdx==2}" @click="tabClick(2)">签约中<text v-if="orderBubble.signing_count>0">{{orderBubble.signing_count}}</text></view>
				<view :class="{'active': tabIdx==3}" @click="tabClick(3)">待支付<text v-if="orderBubble.unpaid_count>0">{{orderBubble.unpaid_count}}</text></view>
				<view :class="{'active': tabIdx==4}" @click="tabClick(4)">已成交<text v-if="orderBubble.sign_finish_count>0">{{orderBubble.sign_finish_count}}</text></view>
				<view :class="{'active': tabIdx==-1}" @click="tabClick(-1)">取消</view>
			</view>
		</view>
		<view class="container pb40">
			<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
				:down="downOption" top="200rpx" :up="upOption">
				<!-- 房源列表 -->
				<view class="source_list">
					<!-- 待签约 -->
					<view class="order_item" v-for="(item,index) in orderLists" @click="detail(item.id)">
						<view class="flex-box flex-between pt30">
							<view class="col89">订单号 <text class="col3 pl10">{{item.order_no}}</text></view>
							<view :class="(item.checkinfo==2||item.checkinfo==3?'status1':(item.checkinfo==0||item.checkinfo==1?'status2':''))">{{item.checkinfo_text}}</view>
						</view>
						<view class="source_item flex-box ptb25">
							<image :src="item.rental.image" mode="aspectFill"></image>
							<view class="flex-grow-1">
								<view class="m-ellipsis fs30 col10 mb15">{{item.rental.name}}</view>
								<view class="area-size col89 fs24 pb15">
									<text>{{item.rental.prov}} | {{item.rental.region}}</text>
									<text>{{item.rental.space}}㎡</text>
								</view>
								<view class="flex-box">
									<view class="targets" v-for="item in item.rental.house_tag_text_arr">{{item}}</view>
								</view>
								<view class="price">¥<text>{{item.rental.price}}</text>/月</view>
							</view>
						</view>
						<view v-if="item.lessor_state==1">
							<view class="fs24 col89 pb20">房东信息</view>
							<view class="flex-box pb30">
								<image :src="item.lessor_user.avatar" class="avatar"></image>
								<view class="fs24 col3 flex-grow-1">{{item.lessor_name}}</view>
								<view class="fs30 col3">{{item.lessor_mobile}}</view>
								<button class="tel" @click.stop="callPhone(item.lessor_mobile)">
									<image src="/static/icon/tel.png"></image>
								</button>
							</view>
						</view>
						<view v-if="item.state==2">
							<view class="fs24 col89 pb20">租户信息</view>
							<view class="flex-box pb30">
								<image :src="item.rental_user.avatar" class="avatar"></image>
								<view class="fs24 col3 flex-grow-1">{{item.renter_name}}</view>
								<view class="fs30 col3">{{item.renter_mobile}}</view>
								<button class="tel" @click.stop="callPhone(item.renter_mobile)">
									<image src="/static/icon/tel.png"></image>
								</button>
							</view>
						</view>
						<view class="flex-box">
							<view class="fs24 col89 flex-grow-1">合计：<text class="red fs20">¥</text><text class="red fs30">{{item.renter_pay_money}}</text></view>
							<view class="btn1" v-if="item.checkinfo == 0 || item.checkinfo == 1 || item.checkinfo == 2 || item.checkinfo == 3" @click.stop="cancel(index)">取消签约</view>
							<view class="btn3" v-if="item.checkinfo == 0 || item.checkinfo == 1 || item.checkinfo == 3 || item.checkinfo == 4" @click.stop="lookImage(index)">查看合同</view>
							
							<!-- #ifdef MP -->
							<button class="btn2" open-type="share" :data-id="item.id" @click.stop="share" v-if="item.checkinfo == 1 || item.checkinfo == 2">邀请签约</button>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<button class="btn2" v-if="item.checkinfo == 1 || item.checkinfo == 2">邀请签约</button>
							<!-- #endif -->
							<!-- #ifdef H5 -->
							<button class="btn2" v-if="item.checkinfo == 1 || item.checkinfo == 2">邀请签约</button>
							<!-- #endif -->
							
							<view class="btn2" v-if="item.is_lessor == 1 && (item.checkinfo == 0 || item.checkinfo == 2)" @click.stop="signContract(item.id)">立即签约</view>
						</view>
					</view>
				</view>
				<mescroll-empty v-if="orderLists.length<=0"></mescroll-empty>
			</mescroll-body>
		</view>
	</view>
</template>

<script>
	// 引入mescroll-mixins.js
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	const core = require('@/xilu/core.js');
	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				tabIdx: 0,
				q:'',
				orderBubble:{},
				downOption:{
					auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption:{
					auto:true, // 不自动加载
					// page: {
					// 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					// 	size: 10 // 每页数据的数量
					// },
					noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
					empty: {
						icon: '/static/images/none-data.png',
						tip: '暂无内容' 
					}
				},
				orderLists:[],
			};
		},
		onLoad(){
			this.fetchBubble();
		},
		onShareAppMessage: function(e) {
			console.log(e.target.dataset.id);
			if(e.from == 'button'){
				let id = e.target.dataset.id;
				return {
					title: '租房合同签约',
					path: '/pages/rental/sign_now/sign_now?rental_order_id='+id
				};
			}
		},
		methods: {
			tabClick(i) {
				this.tabIdx = i;
				this.mescroll.resetUpScroll();
			},
			share(e){
				
			},
			search(){
				this.mescroll.resetUpScroll();
			},
			downCallback(){
				this.mescroll.resetUpScroll();
				this.fetchBubble();
			},
			upCallback(page){
				let that = this;
				let tabIdx = that.tabIdx;
				
				let q = that.q;
				let postData = {
				    page: page.num, // 页码, 默认从1开始
				    pagesize: page.size, // 每页数据条数
					state: tabIdx,
					q:q
				};
				//联网加载数据
				core.get({url:'/api/xiluhouse.broker/sign_lists',data:postData,success:(ret)=>{
					 if(page.num == 1) that.orderLists = []; //如果是第一页需手动制空列表
					 that.orderLists = that.orderLists.concat(ret.data.data); //追加新数据
					 //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
					 that.mescroll.endSuccess(ret.data.data.length);
				},loading:false});
			},
			fetchBubble(){
				core.get({url:'/api/xiluhouse.broker/state_bubble',data:{},success:(ret)=>{
					this.orderBubble = ret.data;
				},loading:false});
			},
			//拨打电话
		    callPhone(phoneNum) {
			    uni.makePhoneCall({
			      phoneNumber: phoneNum,
			      success: function() {
			    },
			    fail() {
					
				}
			})
		    },
			
			 //预览合同
		   lookImage(index) {
			let orderRow = this.orderLists[index];
			if (orderRow.checkinfo == 1 || orderRow.checkinfo == 3) {
			 var url = orderRow.lessor_concat_image;
			} else if (orderRow.checkinfo == 4) {
			 var url = orderRow.order_contract_image;
			} 
			uni.downloadFile({
			 url: url,
			 success: function(res) {
			  var filePath = res.tempFilePath;
			  uni.openDocument({
			   filePath: filePath,
			   success: function(res) {
				console.log("打开文档成功");
			   },
			  });
			 },
			});
		   },
			
			//取消
			cancel(index){
				let that = this;
				let orderList = that.orderLists;
				let order_id = orderList[index].id;
				//联网加载数据
				uni.showModal({
					title: "提示",
					content: "确认取消？",
					success(res) {
						if(res.confirm){
							core.post({url:'/api/xiluhouse.broker/cancel_sign',data:{rental_order_id:order_id},success:(ret)=>{
								 that.downCallback();
							},loading:true});
						}
					}
				})
			},
			//详情
			detail(id){
				uni.navigateTo({
					url: '/pages/rental/order_detail1/order_detail1?rental_order_id='+id
				})
			},
			//发起签约
			signContract(id){
				uni.navigateTo({
					url: '/pages/rental/sign_now/sign_now?rental_order_id='+id
				})
			},
		},
	}
</script>

<style lang="less" scoped>
	.searchbox {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 10;

		.search_box {
			padding: 0 30rpx;
			height: 72rpx;
			background: #F7F9FC;
			border-radius: 36rpx;
			margin: 14rpx 30rpx;

			.search {
				width: 24rpx;
				height: 24rpx;
				margin-right: 12rpx;
			}
		}

		.nav_box {
			padding: 0 30rpx;
			height: 100rpx;
			white-space: nowrap;
			overflow-x: scroll;
			font-size: 30rpx;
			color: #898989;
			text-align: center;
			line-height: 100rpx;

			view {
				position: relative;
				margin-right: 40rpx;
				display: inline-block;

				text {
					position: absolute;
					right: -20rpx;
					top: 18rpx;
					display: block;
					width: 30rpx;
					height: 30rpx;
					background: #FF3B45;
					border-radius: 50%;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 30rpx;
					text-align: center;
				}
			}

			view.active {
				font-size: 36rpx;
				color: #101010;
				font-weight: bold;
				position: relative;
			}

			view.active::after {
				content: "";
				display: block;
				width: 20rpx;
				height: 4rpx;
				background: var(--normal);
				border-radius: 3rpx;
				position: absolute;
				bottom: 10rpx;
				left: 50%;
				transform: translateX(-50%);
			}

		}
	}

	.source_list {
		position: relative;
		z-index: 1;

		.order_item {
			padding: 0 30rpx 30rpx;
			border-bottom: 15rpx solid #F7F9FC;

			.source_item {
				line-height: 1.3;

				image {
					display: block;
					width: 240rpx;
					height: 190rpx;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.area-size {
					text+text {
						margin-left: 40rpx;
					}
				}

				.targets {
					padding: 2rpx 4rpx;
					background: #cce9ff;
					font-size: var(--fs18);
					color: var(--normal);
					border-radius: 2rpx;
					margin-right: 10rpx;
					margin-bottom: 12rpx;
				}

				.price {
					color: var(--red);
					font-size: 24rpx;

					text {
						font-size: 34rpx;
					}
				}
			}


		}


		.status1 {
			color: #FF3B45;
		}

		.status2 {
			color: var(--normal);
		}

		.status3 {
			color: #101010;
		}

		.status4 {
			color: #898989;
		}

		.btn1 {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border: 1px solid #CCCCCC;
			color: #898989;
			font-size: 24rpx;
			background-color: #fff;
			margin-left: 20rpx;
		}

		.btn2 {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border: 1px solid var(--normal);
			background-color: var(--normal);
			color: #fff;
			font-size: 24rpx;
			margin-left: 20rpx;
		}

		.btn3 {
			width: 150rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 30rpx;
			border: 1px solid var(--normal);
			color: var(--normal);
			font-size: 24rpx;
			margin-left: 20rpx;
		}

		.avatar {
			width: 40rpx;
			height: 40rpx;
			border-radius: 50%;
			margin-right: 15rpx;
		}

		.tel {
			padding: 0;
			margin: 0;
			line-height: 1;

			image {
				width: 30rpx;
				height: 30rpx;
				margin-left: 15rpx;
			}
		}


	}
</style>
